<template>
  <view class="card m-10px issue-list">
    <view class="relative mb-10px">
      <view class="inline-block align-middle w-3px h-14px bg-blue-400 mr-4px"/>
      <label class="inline-block align-middle font-bold text-slate-400 text-14px">我收藏的</label>
    </view>
    <view class="grid grid-cols-2 gap-10px">
      <template v-for="({book}) in userStore.collectList">
        <template v-if="!!book">
          <view class="card relative">
            <view class="relative">
              <u-image :src="book.cover" width="100%" :height="120" @click.stop="handlerIssueClick(book)"/>
              <view class="absolute top-0 left-0 text-20rpx p-6rpx rounded-br-10rpx" :class="book.status === 0 ? 'state__pend-sale' : book.status === 1 ? 'state__sold-out' : book.status === 2 ? 'state__sale' : ''">
                {{ book.status === 0 ? '销售中' : book.status === 1 ? '已下架' : book.status === 2 ? '已售出' : '' }}
              </view>
              <view class="absolute bottom-0 right-0 rounded-tl-10rpx bg-hex-8F959ED7">
                <u-icon class="inline-block align-middle mr-10rpx" v-if="book.status !== 2" @click.prevent.stop="handlerEditClick(book)" name="star-fill" color="#efefef" size="30rpx"/>
              </view>
            </view>
            <view class="text-14px text-slate-500 font-bold">{{book.name}}</view>
            <view class="text-14px text-slate-500 font-bold">{{book.title}}</view>
            <view class="flex justify-between books-center text-10px text-slate-400">
              <label>发布于：{{dateFormat(book.createTime)}}</label>
              <view class="text-slate-400 flex books-center">
                <u-icon class="mr-2px" name="eye" size="12px"/>
                <label class="text-12px">{{book.viewCount}}</label>
              </view>
            </view>
          </view>
        </template>
      </template>
    </view>
  </view>
  <u-toast ref="uToast" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type {Book, IssueHistoryParam} from "@/api/book";
import UImage from "@/uni_modules/uview-plus/components/u--image/u--image.vue";
import UIcon from "@/uni_modules/uview-plus/components/u-icon/u-icon.vue";
import type {PageParam} from "@/types";
import user from "@/store/user";
import {deleteByIds, queryIssueHistory} from "@/api/book";
import {onReachBottom, onShow} from "@dcloudio/uni-app";
import {dateFormat} from "@/utils";
import {postDeleteCollect} from "@/api/collect";
import UToast from "@/uni_modules/uview-plus/components/u-toast/u-toast.vue";

const userStore = user()
const bookList = ref<Book[]>([])
const handlerIssueClick = (item:Book) => {
  uni.navigateTo({
    url: `/pages/bookDetail/index?bid=${item.bid}`
  })
}
const pageParam:PageParam = {
  pageNum: 1,
  pageSize: 20,
  total: 0
}
const queryParam:{
  linkName: string
  state?: number | null
  startTime?: Date
  endTime?: Date
} = {
  linkName: '',
  state: null,
  startTime: undefined,
  endTime: undefined
}
const fnGetIssueList = async (isPush?:boolean) => {
  if(!userStore.userInfo?.uId)
    return
  const params: IssueHistoryParam = {
    pageNum: pageParam.pageNum,
    pageSize: pageParam.pageSize,
    uId: userStore.userInfo.uId,
    ...queryParam
  }
  const { data } = await queryIssueHistory(params)
  pageParam.total = data.total
  if(isPush){
    bookList.value.push(...data.records)
  }else{
    bookList.value = data.records
  }
}
onReachBottom(() => {
  if(pageParam.pageSize * pageParam.pageNum < pageParam.total){
    pageParam.pageNum ++
    fnGetIssueList(true)
  }
})
// 初始化获取发布列表数据
fnGetIssueList()
onShow(() => {
  fnGetIssueList()
})
const uToast = ref<UToast | null>(null)
const handlerEditClick = async (item: Book) => {
  if(userStore.userInfo?.uId && item.bid){
    await postDeleteCollect({
      uId: userStore.userInfo.uId,
      bids: item.bid.toString()
    })
    // 更新收藏列表
    await userStore.storeCollectList()
  }else{
    uToast.value && uToast.value.show({
      type: "error",
      message: "请先登录"
    })
  }
}
const handlerRemoveClick = (item: Book) => {
  if(item && item.user.uId === userStore.userInfo?.uId){
    fnDeleteBook(item.bid)
  }
}
const fnDeleteBook = async (id: number) => {
  await deleteByIds([id])
  await fnGetIssueList()
}
</script>

<style lang="scss">
.issue-list{
  .state{
    &__pend-sale{
      background-color: #f0ad4e;
      color: #fff;
    }
    &__sale{
      background-color: #4cd964;
      color: #fff;
    }
    &__sold-out{
      background-color: #8F959E;
      color: #fff;
    }
  }
}
</style>
